<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
    <title>学历层次管理</title>
    <link href="../../../css/main.css" rel="stylesheet" type="text/css" />
    <link
      href="../../../bstable/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../../../bstable/css/bootstrap-table.css"
      rel="stylesheet"
      type="text/css"
    />

    <style>
      .bootstrap-table {
        padding: 20px;
      }

      .dialog-form {
        width: 350px;
      }

      .dialog-form .form_input {
        width: 70%;
      }

      .dialog-form .form-control {
        width: 70%;
        display: inline-block;
      }

      .dialog-form .p_line {
        border: none;
      }
      .find_a,
      .form_input,
      .form_select {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="tabe_div">
      <p class="p_line text_ient" style="margin-bottom: -10px">
        <a class="find_a" id="fieldLabel1">学历层次：</a>
        <input
          class="form_input text_ient"
          type="text"
          maxlength="10"
          placeholder="请输入学历层次"
          id="field1"
        />
        <select
          class="form_select pxbk-select"
          style="padding-left: 1%; width: 210px; background: #fff"
          id="fieldSelect1"
        ></select>
        <a class="find_a" id="fieldLabel2">学校：</a>
        <input
          class="form_input text_ient"
          type="text"
          maxlength="10"
          placeholder="请输入学校"
          id="field2"
        />
        <select
          class="form_select pxbk-select"
          style="padding-left: 1%; width: 210px; background: #fff"
          id="fieldSelect2"
        ></select>
        <a class="find_a" id="fieldLabel3">专业：</a>
        <input
          class="form_input text_ient"
          type="text"
          maxlength="10"
          placeholder="请输入专业"
          id="field3"
        />
        <input
          style="float: right; margin-right: 40px; padding: 8px 25px"
          type="button"
          value="查询"
          class="but_find"
          id="search"
        />
      </p>
      <table
        data-url="json/data_alae_list.json"
        id="table"
        class="table_style"
        style="margin: 0 auto"
      ></table>
    </div>
    <script src="../../../js/jquery.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/date/js/laydate.js"></script>
    <script src="../../../bstable/js/bootstrap.min.js"></script>
    <script src="../../../bstable/js/bootstrap-table.js"></script>
    <script src="../../../bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../../layer_v2.1/layer/layer.js"></script>
    <script type="text/javascript">
      $(function () {
        const educationType = getQuery('educationType');
        $('#search').on('click', function () {
          $('#table').bootstrapTable('refresh');
        });
        var perm = JSON.parse(localStorage.getItem('userInfo')).perm;

        const indexColumn = {
          field: 'no',
          title: '序号',
          // sortable: true,
          width: '120',
          align: 'center',
          formatter: function (value, row, index) {
            return index + 1;
          },
        };

        const operateColumn = {
          title: '操作',
          field: 'id',
          align: 'center',
          width: '160',
          formatter: function (value, row) {
            const a = '<a href="#">作废</a> ';
            const e = '<a href="#" onclick="config()">修改</a> ';
            return educationType === '1' ? a : e + a;
          },
        };

        let api,
          columns = '';

        switch (educationType) {
          case '1':
            $('#fieldLabel1').show();
            $('#field1').show();
            localStorage.setItem('name', '教务管理/学历层次管理');
            api = 'education/queryEducationList';
            columns = [
              indexColumn,
              {
                title: '学历层次',
                field: 'educationName',
                align: 'center',
                valign: 'middle',
              },
              operateColumn,
            ];
            break;
          case '2':
            $('#fieldLabel1').show();
            $('#fieldLabel2').show();
            $('#fieldSelect1').show();
            $('#field2').show();
            localStorage.setItem('name', '教务管理/学历学校管理');
            api = 'education/querySchoolList?educationId=';
            columns = [
              indexColumn,
              {
                title: '学历层次',
                field: 'educationName',
                align: 'center',
                valign: 'middle',
              },
              {
                title: '学校',
                field: 'schoolName',
                align: 'center',
                valign: 'middle',
              },
              operateColumn,
            ];
            break;
          default:
            $('#fieldLabel1').show();
            $('#fieldLabel2').show();
            $('#fieldLabel3').show();
            $('#fieldSelect1').show();
            $('#fieldSelect2').show();
            $('#field3').show();
            localStorage.setItem('name', '教务管理/学历专业管理');
            api = 'education/queryEducationList';
            columns = [
              indexColumn,
              {
                title: '学历层次',
                field: 'educationName',
                align: 'center',
                valign: 'middle',
              },
              {
                title: '学校',
                field: 'educationName',
                align: 'center',
                valign: 'middle',
              },
              {
                title: '专业名称',
                field: 'educationName',
                align: 'center',
                valign: 'middle',
              },
              {
                title: '创建日期',
                field: 'supervisorsName',
                align: 'center',
              },
              operateColumn,
            ];
        }

        loadTableData(api, columns);

        function loadTableData(api, columns) {
          $('#table').bootstrapTable({
            method: 'post',
            striped: true,
            singleSelect: false,
            url: baseUrl + api,
            dataType: 'json',
            sidePagination: 'server',
            pagination: false, //分页
            search: false, //显示搜索框
            contentType: 'application/x-www-form-urlencoded',
            ajaxOptions: {
              headers: {
                Authorization: JSON.parse(localStorage.getItem('userInfo'))
                  .token,
              },
            },
            queryParams: function (params) {
              return { educationId: '' };
            },
            responseHandler: function (res) {
              var list = res;
              return {
                rows: list,
                total: res.length,
              };
            },
            columns: columns,
          });
        }
      });

      //配置
      function config() {
        layerOpen();
      }

      Date.prototype.Format = function (fmt) {
        // author: meizz
        var o = {
          'M+': this.getMonth() + 1, // 月份
          'd+': this.getDate(), // 日
          'h+': this.getHours(), // 小时
          'm+': this.getMinutes(), // 分
          's+': this.getSeconds(), // 秒
          'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds(), // 毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length)
          );
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            );
        return fmt;
      };
      var getTime = function getTime() {
        return new Date().Format('yyyy-MM-dd');
      };

      //type 1新增  2修改
      function layerOpen() {
        var html = `<div class="dialog-form"><div class="p_line text_ient lx-row">
                            <p class="col lx-col-50">
                    <a class="find_a">创建时间：</a>
                    ${getTime()}
                </p>
                            <p class="col lx-col-50">
                    <a class="find_a">学历层次：&nbsp;</a>
                    <input id="group_name" type="text" maxlength="11" style="width: 66%;" class="form_input text_ient" placeholder="请输入名称"/>
                </p>
                <p class="col lx-col-50">
                    <a class="find_a">
                      学校名称：</a>
                    <input id="zg_tel" type="text" maxlength="11" style="width: 66%;" class="form_input text_ient" placeholder="请输入11位手机号" oninput="getSupervisorNameByTel(this)"/>
                </p>
                <p class="col lx-col-50">
                    <a class="find_a">
                      专业：&nbsp;</a>
                    <input id="zg_name" type="text" maxlength="10" class="form_input text_ient" placeholder="主管姓名" disabled/>
                </p>
            </div></div>`;
        layer.open({
          title: '修改',
          type: 1,
          // closeBtn: 0, //不显示关闭按钮
          anim: 2,
          yes: function (index, layero) {
            //do something
            // console.log(index, layero);
            // layer.close(index); //如果设定了yes回调，需进行手工关闭
          },
          btn: ['保存'],
          // shadeClose: true, //开启遮罩关闭
          content: html,
        });
      }

      function rowStyle(item, index) {
        style = item.colorFlag == 1 ? { css: { color: '#ed5565' } } : {};
        return style;
      }
    </script>
  </body>
</html>
